<ion-header>
  <ion-navbar>
    <ion-title>打开地图</ion-title>
    <ion-buttons>
      <button ion-button (click)="dismiss()">
        <ion-icon name="arrow-back"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content >
  <div #mapContainer class="mapContainer"></div>
  <div >
    <ion-list>
    <ion-item-sliding *ngFor="let item of showArr">
      <ion-item>
          {{item.text}}
      </ion-item>
      <ion-item-options side="right">
          <button ion-button> {{item.tips}}</button>
        </ion-item-options>
    </ion-item-sliding>
    </ion-list>
    <textarea disabled rows="10">
1.<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你申请的高德地图web端key"></script>
2.<div #map_container class="map_container"></div>

3.import {Component, ViewChild, ElementRef} from '@angular/core';
declare var AMap;
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('map_container') map_container: ElementRef;
  map: any;//地图对象
  constructor() {
  }
  ionViewDidEnter() {
    this.map = new AMap.Map(this.map_container.nativeElement, {
      view: new AMap.View2D({//创建地图二维视口
        zoom: 11, //设置地图缩放级别
        rotateEnable: true,
        showBuildingBlock: true
      })
    });
  }
}
    </textarea>
  </div>

</ion-content>
